import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom'
import Index from '../Index'
import FindHouse from '../FindHouse'
import My from '../My'
import './index.scss'
import { TabBar } from 'antd-mobile';
// 将字体图标css文件导入 ， iconfont icon-ind
import '../../assets/fonts/iconfont.css'
import { useState } from 'react'

function Home(props) {
    let [selectedTab, setSelectedTab] = useState('home');
    let [hidden, setHidden] = useState(false);
    let [fullScreen, setFullScreen] = useState(true);

    // state = {
    //     selectedTab: 'home',
    //     hidden: false,
    //     fullScreen: true,
    // }

    return (<div className="home">
        {/* Home <br />
            <Link to="/home/index">首页Index</Link>
            <Link to="/home/findhouse">找房</Link>
            <Link to="/home/my">我的</Link> */}

        <Route path="/home/index" component={Index}></Route>
        <Route path="/home/findhouse" component={FindHouse}></Route>
        <Route path="/home/my" component={My}></Route>

        {/* Tabbar结构 */}
        <div style={fullScreen ? { position: 'fixed', height: '50px', width: '100%', bottom: 0 } : { height: 400 }}>
            <TabBar
                unselectedTintColor="#949494"  // 不选中时的颜色
                tintColor="#33A3F4"   // 选中时的颜色
                barTintColor="white"
                hidden={hidden}
            >
                <TabBar.Item
                    title="首页"
                    key="Life"
                    icon={<i className="iconfont icon-ind"></i>
                    }
                    selectedIcon={<i className="iconfont icon-ind"></i>
                    }
                    selected={selectedTab === 'home'}  // true表示选中当前的选项
                    onPress={() => {
                        // this.setState({
                        //     selectedTab: 'home',
                        // });
                        setSelectedTab('home')

                        // 编程式导航到 /home/index
                        props.history.push('/home/index');
                    }}
                    data-seed="logId"
                >

                </TabBar.Item>
                <TabBar.Item
                    title="找房"
                    key="findhouse"
                    icon={<i className="iconfont icon-findHouse"></i>
                    }
                    selectedIcon={<i className="iconfont icon-findHouse"></i>
                    }
                    selected={selectedTab === 'findhouse'}

                    onPress={() => {
                        // this.setState({
                        //     selectedTab: 'findhouse',
                        // });
                        setSelectedTab('findhouse')
                        // 编程式导航到 /home/findhouse
                        props.history.push('/home/findhouse');
                    }}
                    data-seed="logId"
                >

                </TabBar.Item>
                <TabBar.Item
                    title="我的"
                    key="my"
                    icon={<i className="iconfont icon-my"></i>
                    }
                    selectedIcon={<i className="iconfont icon-my"></i>
                    }
                    selected={selectedTab === 'my'}

                    onPress={() => {
                        // this.setState({
                        //     selectedTab: 'my',
                        // });
                        setSelectedTab('my')
                        // 编程式导航到 /home/my
                        props.history.push('/home/my');
                    }}
                    data-seed="logId"
                >

                </TabBar.Item>

            </TabBar>
        </div>
    </div>);

}

export default Home;